<template>
  <view class="group-page">
    <view class="list" v-if="list.length > 0">
      <v-item :list="list" :total="total" :is_group="true" />
    </view>
    <view class="nothing" v-else>
      <view class="text">暂无正在拼的团...</view>
      <view class="btn" @click="goGroup">现在去拼团</view>
    </view>
    <v-tab :selected="'/pages/group/index'" />
  </view>
</template>

<script>
import Tab from '../../components/tab'
import color from '@/config/color.js'
import config from '@/config/config.js'
import base64 from '../../util/base64'
import Group from '../../api/group'
import Item from './components/Item'

const groupModel = new Group()
export default {
  components: {
    'v-tab': Tab,
    'v-item': Item
  },
  onLoad() {
    // 分享
    /*#ifdef MP-WEIXIN*/
    // 微信小程序端执行的逻辑
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline'],
      success: res => {

      }
    })
    /*#endif*/

    uni.hideTabBar({
      animation: false,
      success: () => {

      },
      fail: () => {

      }
    })
    uni.setNavigationBarTitle({
      title: '拼团专区'
    })
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: this.activeColor,
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },
  onShow() {
    this.list = []
    this.total = 0
    this.queryList = {
      page: 0,
      pageSize: 20,
      busy: false
    }
    this.getList()
  },
  onHide() {
    // 一定要处理
    this.queryList = {
      page: 0,
      pageSize: 20,
      busy: false
    }
    this.list = []
    this.total = 0
  },
  // 加载更多,分页
  onReachBottom() {
    this.getList(true)
  },
  // 刷新
  onPullDownRefresh() {
    // onshow中处理, 不需要刷新
    // this.getList()
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
      list: [],
      total: 0,
      queryList: {
        page: 0,
        pageSize: 20,
        busy: false
      }
    }
  },
  methods: {
    goGroup() {
      uni.navigateTo({
        url: '/sub_product/area/index?id=5'
      })
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        groupModel.getGroupAll({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          console.log(data, '/.//')
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              console.log('aaa')
              this.list = this.list.concat(data.list)
            } else {
              console.log('list')
              this.list = data.list
            }
          }
          this.total = data.quantity
          console.log(this.list)
          // uni.stopPullDownRefresh();
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.group-page {
  min-height: 100vh;
  background: #f3f5f7;
  padding-bottom: 100px;
  //font-size: 24rpx;
  .nothing {
    //margin: 20rpx;
    //padding: 20rpx;
    //height: 300px;
    //background: white;
    padding: 20rpx;
    .btn {
      margin-top: 10px;
      background: $main_color;
      display: inline-block;
      color: white;
      padding: 5rpx 10rpx;
      border-radius: 20rpx;
    }
  }
  .list {
    padding: 20rpx;
  }
}
</style>
